@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);


/* ------ general
-----------------------------------------------*/

.graph .wrap {
position:relative;
top:0;
left:25%;
width:500px;
height:200px;
margin-top:0;
/*margin:-200px 0 0 -400px;*/
}

.graph h1 {
font-size:40px;
font-family:'PT Sans Narrow', sans-serif;
text-align:center;
margin:0;
margin-bottom:120px;
text-shadow:5px 5px 0 #ddd;
}

.graph .bar {
float:left;
clear:both;
width:100%;
height:40px;
position:relative;
top:20%
}

.graph .bar .percent {
background:#2caedd;
background:-moz-linear-gradient(left, #2caedd 0%, #86dd2a 28%, #e0d72a 46%, #e8902c 66%, #ed2d2d 86%, #ff0000 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#2caedd), color-stop(28%,#86dd2a), color-stop(46%,#e0d72a), color-stop(66%,#e8902c), color-stop(86%,#ed2d2d), color-stop(100%,#ff0000));
background:-webkit-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-o-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:-ms-linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
background:linear-gradient(left, #2caedd 0%,#86dd2a 28%,#e0d72a 46%,#e8902c 66%,#ed2d2d 86%,#ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2caedd', endColorstr='#ff0000', GradientType=1);
float:left;
width:100%;
height:40px;
position:relative;
}

.graph .bar .percent span {
display:block;
position:absolute;
top:0;
right:0;
z-index:2;
width:100%;
height:40px;
background:rgba(255, 255, 255, .7);
}

.graph .bar .circle {
display:block;
position:absolute;
top:50%;
left:0;
z-index:3;
margin:-40px 0 0 -40px;
width:80px;
height:80px;
line-height:80px;
text-align:center;
font-size:20px;
font-family:'PT Sans Narrow', sans-serif;
color:#fff;
background:rgba(0, 0, 0, .1);
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
}

.graph .bar .circle.rotate {
-webkit-transform:rotate(1080deg);
-moz-transform:rotate(1080deg);
-o-transform:rotate(1080deg);
}

.graph .bar .circle span {
display:inline-block;
width:70px;
height:70px;
line-height:70px;
background:rgba(0, 0, 0, .3);
-moz-border-radius:35px;
-webkit-border-radius:35px;
border-radius:35px;
}

.graph .text {
position:absolute;
bottom:0;
left:50%;
width:170px;
margin-left:-85px;
}

.text .input {
width:140px;
padding:15px;
border:1px solid #ddd;
text-align:center;
font-size:20px;
font-family:'PT Sans Narrow', sans-serif;
}

.graph .text small {
display:block;
text-align:center;
margin-top:15px;
font-size:11px;
}

.graph a {
color:#eee;
}